<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WebM Dashboard</title>
  <link href="/css/bootstrap.css" rel="stylesheet">
  <link href="/css/bootstrap-responsive.css" rel="stylesheet">
  <link href="/css/dashboard.css" rel="stylesheet">
  <style type="text/css">
    body {
      padding-top: 60px;
      padding-bottom: 40px;
    }
  </style>
  <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
  <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
  <!-- The majority of our javascript -->
  <!-- LQ: Will jstree work with a newer jQuery? Seems so. -->
  <!-- script type="text/javascript" src="/js/jstree/_lib/jquery.js"></script -->
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
  <script type="text/javascript" src="/js/jstree/jquery.jstree.js"></script>
  <link rel="stylesheet" type="text/css" href="/js/jquery-ui/css/custom-theme/jquery-ui-1.8.23.custom.css" />
  <script type="text/javascript" src="/js/jquery-ui/js/jquery-ui-1.8.21.custom.min.js"></script>
  <script type="text/javascript" src="/js/json2.js"></script>
  <!-- A file with useful js functions -->
  <script type="text/javascript" src="/js/utils.js"></script>
  <script type="text/javascript" src="/js/chartutils.js"></script>
  <script type="text/javascript" src="/js/commit_search.js"></script>

  <link rel="shortcut icon" href="/images/webm-48px.png">
  <link rel="apple-touch-icon" href="/images/apple-touch-icon.png">

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.0', {'packages':['corechart', 'table']});

// This is the function run on page load. In here, we load the main chart and
// the most recent commits
var chartOptions = {width: 650,
                   height: 430,
                   chartArea: {height: "70%", width: "70%"}};

$(function() {

  // We load the pre-selected chart into mainchart div
  var time_responses = new Array();

  // A loading image
  $('#mainchartdiv').html("<img src='/images/ajax-loader.gif' alt='Loading...' style='display:block; margin:auto;'>");

  // Wait until all data is fetched to generate graphs
  $(document).ajaxStop(function() {
    $(this).unbind("ajaxStop");
    if (time_responses.length > 0) {
      drawTimeSeriesChart(time_responses, 'mainchartdiv', null, null, null, null);
    }
  });

  // For now we use GLBPsnr,CXFPS/good/~Cif_files/~master though this is easy
  // to change (to another time series)
  var metrics = ['GLBPsnr', 'CxFPS'];
  var configs = ['good'];
  var files = ['~Cif_files'];
  var commits = ['~master'];

  // Ew, quadruple nested loop
  for (var i = 0; i < metrics.length; i++) {
    for (var j = 0; j < configs.length; j++) {
      for (var k = 0; k < files.length; k++) {
        for (var t = 0; t < commits.length; t++) {
          // We put together a url
          var metric = metrics[i];
          var config = configs[j];
          var file = files[k];
          var commit = commits[t];
          metricurl = "/metric-data/" + metric + "/" + config + "/" + file + "/" + commit

          // pretty-up commit hash
          commit = commit.slice(0,9);

          var series_name = []
          if (metrics.length > 1) {
            series_name.push(metric);
          }
          if (configs.length > 1) {
            series_name.push(config);
          }
          if (commit[0] === "~") {
            if (files.length > 1) {
              series_name.push(file);
            }
            series_name.push(commit);
            series_name = {label: series_name.join(" "), commit: commit};
            FetchMetric(metricurl, series_name, time_responses);
          }
        }
      }
    }
  }

  // We load our series of commits and runs into commitdiv


});

</script>


</head>
<body>

  <header>

    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container-fluid">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="/">WebM Dashboard</a>
          <div class="nav-collapse collapse">
            <p class="navbar-text pull-right">
              {% if user %}
              Logged in as {{ user.nickname }} [<a href="{{ logout_url }}">Sign Out</a>]
              {% else %}
              <a href="{{ login_url }}">Sign In</a>
              {% endif %}
            </p>
            <ul class="nav">
              <li><a href="/explore">Explorer View</a></li>
              <li><a href="/commit_viewer/">Commit View</a></li>
              <li><a href="#helpModal" data-toggle="modal">Help</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div class="modal hide fade" id="helpModal" tabindex="-1" role="dialog" aria-labelledby="helpModalLabel" aria-hidden="true">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="helpModalLabel">About this page</h3>
      </div>
      <div class="modal-body">
        <p>
          Welcome to the dashboards for the WebM Project! On this page, you'll find a summary of some of the most recent commits and a graph showing several metrics for the master branch over time. The Commit View allows you to search and view individual commits, and the Explorer View allows you to search for any test run data, given the desired metric, config, fileset and commit or branch.
        </p>
      </div>
    </div>

  </header>

  <div class="container-fluid">


    <div class="row-fluid">

      <div class="span12">

        <h3>Welcome </h3>

        <div id="mainchartdiv"> </div>

      </div>

    </div><!-- End row -->

  </div><!-- End container -->

<div id="bottomcenter">

<div class="container-fluid">
<table class="multicommits" width="100%">

<tr><td>
    <div class="row-fluid" id="">
      <div class="span6">
        <h3>Most Recent Commits</h3>
      </div>
      <div class="span6">
        <a href="#searchModal" data-toggle="modal" id="searchbutton" class="btn pull-right">Search Commits</a>
      </div>
    </div>
</tr></td>

{% for commit, runs in formatted_commits %}
<tr>
<td>

    <div class="row-fluid" id="">
      <div class="span6">
        <h4>Commit Summary: {{ commit.commit }}</h4>
      </div>
    </div>

    <div class="row-fluid" id="">
      <div class="span6">

        <table class="commitlog">
          <tr id="{{commit.commit}}_row">
            <td>{{ commit.commit }}</td>
            <td>{{ commit.date }}</td>
          </tr>
          <tr id="{{commit.commit}}_row2">
            <td></td>
            <td>{{ commit.author }}</td>
          </tr>
          <tr id="{{commit.commit}}_row3">
            <td></td>
            <td>
              <div><strong>{{ commit.subject }}</strong></div>
              <div id="{{commit.commit}}_body1">
                {% for line in commit.body %}
                  {{ line }}<br>
                {% endfor %}
              </div>
            </td>
          </tr>
          <tr id="{{commit.commit}}_row4">
            <td></td>
            <td>
              <div> Branches:</div>
              <div id="{{commit.commit}}_body2">
                {% if commit.branches %}
                  {% for br in commit.branches %}
                    {{ br }}<br>
                  {% endfor %}
                {% else %}
                  None
                {% endif %}
              </div>
            </td>
          </tr>
        </table>
      </div>
      <div class="span6" style="overflow: auto;">

        <!-- Hide the threshold for now
        Threshold: {{threshold}}% <input type="button" value="Change" onclick="openThresholdDialog()"/>
        <br>

        <div id="thresholdDialog"> Please choose a new threshold:
        <form id="thform" name="thform" onsubmit="submitThreshold()" style="float:left">
        <input type='text' name='newThreshold' />
        <input type='button' value="Submit" onclick="submitThreshold()">
        </form>
        </div>
        -->

        <!-- Elif statement not supported in Django 1.2 -->
        <table class="resultgrid">
          {% for run in runs %}
          <tr>
            <th>{{ run.metric }}</th>
            <th>{{ run.config }}</th>
            <td>
            {% for e in run.runs %}
              {% if e.class == 'good major' or e.class == 'good minor' %}
              <dt class="{{e.class}}" title="{{ e.filename }}, {{e.value}}" >&#9650;</dt>
              {% else %}
                {% if e.class == 'bad major' or e.class == 'bad minor' %}
                <dt class="{{e.class}}" title="{{ e.filename }}, {{e.value}}">&#9660;</dt>
                {% else %}
                <dt class="unchanged" title="{{ e.filename }}, {{e.value}}">&#9724;</dt>
                {% endif %}
              {% endif %}
            {% endfor %}
          {% endfor %}
          </td>
          </tr>
        </table>
      </div>

    </div>
  </div>

</td>
</tr>
{% endfor %}
</table>

{% include "templates/footer.html" %}

  </div><!-- End container -->

</div> <!-- end of fluid container -->
</div>

<!-- A dialog for searching commits -->
    <div class="modal hide fade" id="searchModal" tabindex="-1" role="dialog" aria-labelledby="searchModalLabel" aria-hidden="true">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="searchModalLabel">Search for Commits</h3>
      </div>
      <div class="modal-body">

      <div id="searchCommand" style="float:left">Please enter a commit to display, or an email to look for:</div>
      <form name="myform">
      <input type='text' name='query' />
      <input type='button' id="submitButton" value="Search" onClick="javascript: searchcommits(this.form)">
      </form>

      </div>
    </div>

<script src="/js/bootstrap.min.js"></script>

</body>
</html>
